<template>
	<view class="wrap">
		<u-form class="form" :model="query" ref="uForm" label-position="left">
			<u-form-item label="任务类型" label-width="180">
				<js-select
					v-model="query.taskTypeCode"
					:items="typeSelectList"
					placeholder="请选择任务类型"
					@confirm="getTaskType(arguments)"
					:label-value="query.taskTypeName"
					@label-input="query.taskTypeCode = $event"
				></js-select>
			</u-form-item>
			<u-form-item label="牵头责任单位" label-width="180">
				<u-input placeholder="请输入牵头责任单位" v-model="query.taskLeaderOrgName" type="text" maxlength="200"></u-input>
			</u-form-item>
			<u-form-item label="关键字" label-width="180"><u-input placeholder="请输入关键字" v-model="query.taskTitle" type="text" maxlength="200"></u-input></u-form-item>
		</u-form>
		<view class="uni-flex" style="-webkit-justify-content: flex-end;justify-content: flex-end;margin-bottom: 10rpx;">
			<u-button type="primary" style="margin-top: 25rpx; width: 30%; margin-bottom: 4rpx" @click="doQuery" :plain="true" :hairline="true" text="查询">查询</u-button>
			<u-button type="primary" style="margin-top: 25rpx; width: 30%; margin-bottom: 4rpx" @click="resetAll" :plain="true" :hairline="true" text="重置">重置</u-button>
		</view>
		<u-modal
			v-model="userFeedbackHidden"
			title="领导批示"
			ref="uModal"
			:show-cancel-button="true"
			confirmText="确定"
			cancelText="取消"
			@cancel="closeDialog"
			@confirm="submitFeedback"
		>
			<view class="u-update-content" style="margin-top: 20rpx">
				<textarea
					type="text"
					style="
		        width: 90%;
		        margin: auto;
		        height: 200rpx;
		        border: 1px solid #ccc;
		        font-size: 14px;
		      "
					v-model="inputContent"
					placeholder-class="line"
					maxlength="100"
					placeholder="文字限制在100字以内"
				/>
			</view>
		</u-modal>
		<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
			<view class="uni-flex uni-column" v-for="(item, index) in list" :key="item.id" :index="index" style="border-bottom: 1px solid #ededed">
				<view class="uni-common-list-height" style="padding-left: 21rpx" >
					<text class="slh">{{ item.taskTitle || item.id }}</text>
				</view>
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;">
					<text>任务类型：{{ item.taskTypeName }}</text>
				</view>
				<!-- 0删除、1草稿、2已发布、3任务部署审核通过、4任务部署审核驳回、5秘书长审核通过、6秘书长审核驳回、7已确认、8进行中、9已结束 -->
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;" v-if="item.taskStatus == '0'"><text>任务状态：删除</text></view>
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;" v-if="item.taskStatus == '1'"><text>任务状态：草稿</text></view>
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;" v-if="item.taskStatus == '2'"><text>任务状态：已发布</text></view>
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;" v-if="item.taskStatus == '3'"><text>任务状态：任务部署审核通过</text></view>
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;" v-if="item.taskStatus == '4'"><text>任务状态：任务部署审核驳回</text></view>
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;" v-if="item.taskStatus == '5'"><text>任务状态：秘书长审核通过</text></view>
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;" v-if="item.taskStatus == '6'"><text>任务状态：秘书长审核驳回</text></view>
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;" v-if="item.taskStatus == '7'"><text>任务状态：已确认</text></view>
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;" v-if="item.taskStatus == '8'"><text>任务状态：进行中</text></view>
				<view class="uni-common-list-height" style="padding-left: 21rpx;color: #909399;" v-if="item.taskStatus == '9'"><text>任务状态：已结束</text></view>
				<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
					<view
						class="text uni-flex uni-common-list-height"
						style="margin-right: 25rpx;width: 200rpx;;height: 70rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;margin-bottom: 10rpx;"
					>
						<!-- <text class="btn_ps">批示</text> -->

						<u-button
							type="primary"
							style="margin-right: 25rpx;margin-left: 25rpx;margin-top: 25rpx; width: 100px; margin-bottom: 4rpx;height: 90%;"
							@click="navTo('/pages/task/supervisionTracking/trackListDetail?id=' + item.id)"
							:plain="true"
							:hairline="true"
							text="批示"
						>
							跟踪进度
						</u-button>
					</view>
				</view>
			</view>
			<view class="loadmore" @click="loadMore"><u-loadmore :status="loadStatus"></u-loadmore></view>
		</scroll-view>
	</view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 */
export default {
	data() {
		return {
			keywords: '',
			chooseId: '',
			userFeedbackHidden: false,
			inputContent: '',
			query: {
				pageNo: 1,
				pageSize: 20,
				taskTypeCode: '',
				taskTypeName: '',
				taskLeaderOrgName: '',
				taskTitle: ''
			},
			audit: {
				actionId: '',
				explainCode: '',
				explainContent: ''
			},

			list: [],
			typeSelectList: [],
			count: 0,
			loadStatus: 'loadmore',
			options: [{ text: '删除', style: { background: '#dd524d' } }]
		};
	},
	onLoad() {
		this.loadList();
	},
	onShow() {},
	onReady() {
		this.$u.api.taskInfo.getDict().then(res => {
			res.data.map(item => {
				this.typeSelectList.push({
					name: item.dictLabel,
					value: item.dictValue
				});
			});
		});
	},
	methods: {
		loadMore() {
			this.loadStatus = 'loading';
			setTimeout(() => {
				this.query.pageNo += 1;
				this.loadList();
			}, 100);
		},
		resetAll() {
			this.query.taskLeaderOrgName = '';
			this.query.taskTypeCode = '';
			this.query.taskTypeName = '';
			this.query.pageNo = 1;
			this.query.taskTitle = '';
			this.list = [];
			this.loadList();
		},
		getTaskType(val) {
			this.query.taskTypeCode = val[0];
			this.query.taskTypeName = val[1];
		},
		loadList() {
			this.$u.api.taskTrace.list(this.query).then(res => {
				if (!res.list || res.list.length == 0) {
					this.loadStatus = 'nomore';
					return;
				}
				this.list = this.list.concat(res.list);
				this.count = res.count;
				this.loadStatus = 'loadmore';
			});
		},
		optionsClick(rowIndex, btnIndex) {
			if (btnIndex == 0) {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认要删除该数据吗？',
					showCancel: true,
					success: function(res2) {
						if (res2.confirm) {
							let row = self.list[rowIndex];
							self.$u.api.testData.delete({ id: row.id }).then(res => {
								self.$u.toast(res.message);
								if (res.result == 'true') {
									self.list.splice(rowIndex, 1);
								}
							});
						}
					}
				});
			}
		},
		doQuery() {
			this.list = [];
			this.query.pageNo = 1;

			this.loadList();
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		showDialog(id) {
			this.userFeedbackHidden = true;
			this.chooseId = id;
		},
		closeDialog() {
			this.userFeedbackHidden = false;
			this.chooseId = '';
			this.inputContent = '';
		},
		submitFeedback() {
			var sf = this.inputContent;
			this.inputContent = '';
			this.userFeedbackHidden = false;
			this.audit.actionId = this.chooseId;
			this.audit.explainContent = sf;
			this.audit.explainCode = this.vuex_user.loginCode;
			this.$u.api.taskTrace.auditTask(this.audit).then(res => {
				uni.showToast({
					title: res.message,
					icon: 'none'
				});
				if (res.result == 'true') {
					this.search('');
				}
			});
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f8f8f8;
}
.btn-plus {
	position: absolute;
	bottom: 50rpx;
	right: 50rpx;
	z-index: 1;
	opacity: 0.6;
}
.btn-plus:hover {
	opacity: 1;
}
.uni-flex {
	display: flex;
	flex-direction: row;
}

.uni-row {
	flex-direction: row;
}
.uni-column {
	flex-direction: column;
}
.uni-common-list-height {
	margin-top: 10rpx;
	margin-left: 10rpx;
	
	overflow: hidden!important;
	white-space: nowrap!important;
	text-overflow: ellipsis!important;
}
.uni-bg {
	background: #007aff;
	color: #fff;
	width: 120rpx;
	height: 70rpx;
	-webkit-justify-content: center;
}
.btn_ps {
	padding: 5px;
	border: 1px solid blue;
	border-radius: 5px;
}
.popup_overlay {
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: 0.8;
	filter: alpha(opacity=88);
}

.popup_content {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 480rpx;
	height: 420rpx;
	margin-left: -270rpx;
	margin-top: -270rpx;
	border: 10px solid white;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}

.popup_title {
	width: 480rpx;
	text-align: left;
	font-size: 32rpx;
}

.popup_textarea_item {
	padding-top: 5rpx;
	height: 200rpx;
	width: 440rpx;
	background-color: #f1f1f1;
	margin-top: 20rpx;
	margin-left: 20rpx;
	padding-top: 25rpx;
}

.popup_textarea {
	width: 410rpx;
	height: 200rpx;
	font-size: 26rpx;
	margin-left: 10rpx;
	margin-right: 10rpx;
	border: 1px solid #f1f1f1;
	background-color: #f1f1f1;
	border-radius: 1px;
	max-width: 100;
}

.popup_button {
	color: gray;
}
.popup_button2 {
	color: white;
	background-color: #007aff;
}
.buttons {
	text-align: center;
	font-size: 20rpx;
	border: 1px solid #f1f1f1;
	margin-top: 40rpx;
	padding: 5px;
	border-radius: 5px;
}
.slh {
	span {
		overflow: hidden!important;
		white-space: nowrap!important;
		text-overflow: ellipsis!important;
	}
}
</style>
